import { CdkStepper } from '@angular/cdk/stepper';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'example-custom-stepper',
  template: `
    <section class="example-container">
      <header>
        <h2>Step {{ selectedIndex + 1 }}/{{ steps.length }}</h2>
      </header>

      <div [style.display]="selected ? 'block' : 'none'">
        <!-- 这里接受cdk-step的ng-content -->
        <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
      </div>

      <footer class="example-step-navigation-bar">
        <button class="example-nav-button" cdkStepperPrevious>&larr;</button>
        <button
          class="example-step"
          *ngFor="let step of steps; let i = index"
          [ngClass]="{ 'example-active': selectedIndex === i }"
          (click)="onClick(i)"
        >
          Step {{ i + 1 }}
        </button>
        <button class="example-nav-button" cdkStepperNext>&rarr;</button>
      </footer>
    </section>
  `,
  styleUrls: ['./stepper.component.sass'],
  providers: [{ provide: CdkStepper, useExisting: CustomStepper }]
})
export class CustomStepper extends CdkStepper {
  // CdkStepper 内置selected属性

  onClick(index: number): void {
    this.selectedIndex = index;
  }
}

@Component({
  selector: 'app-stepper',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.sass'],
  providers: [{ provide: CdkStepper, useExisting: StepperComponent }],
})
export class StepperComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
